<template>
  <div>
    <el-card shadow="never">
      <header-title title="活动管理"></header-title>
    </el-card>
    <el-card shadow="never">
      <div>
        活动名称/商户名称: <el-input v-model="keyword" clearable placeholder="请输入" size="small" style="margin: 0 15px 0 15px;width: 150px;"></el-input>
        <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
      </div>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-col :span="5">
          <card-item title="商户总数">
            <template slot="number">
              <div class="number">
                <count-up :end-val="modal.businessCount"></count-up>
              </div>
            </template>
          </card-item>
        </el-col>
        <el-col :span="5">
          <card-item title="活动商户数">
            <template slot="number">
              <div class="number">
                <count-up :end-val="modal.activityBusinessCount"></count-up>
              </div>
            </template>
          </card-item>
        </el-col>
        <el-col :span="5">
          <card-item title="优惠券总数">
            <template slot="number">
              <div class="number">
                <count-up :end-val="modal.totalCouponNumber"></count-up>
              </div>
            </template>
          </card-item>
        </el-col>
        <el-col :span="5">
          <card-item title="优惠券领取总数">
            <template slot="number">
              <div class="number">
                <count-up :end-val="modal.totalReceiveNumber"></count-up>
              </div>
            </template>
          </card-item>
        </el-col>
        <el-col :span="4">
          <card-item title="核销总量">
            <template slot="number">
              <div class="number">
                <count-up :end-val="modal.totalConsumeNumber"></count-up>
              </div>
            </template>
          </card-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="activityData" v-loading="loading" style="width: 100%">
          <el-table-column prop="businessName" label="商户名称"></el-table-column>
          <el-table-column prop="couponNumber" label="优惠券数量"></el-table-column>
          <el-table-column prop="receiveNumber" label="领券数量"></el-table-column>
          <el-table-column prop="consumeNumber" label="优惠券使用数量"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="details(scope.row)" type="text" style="color:#71dc80;">查看详情</el-button>
            </template>
          </el-table-column>
          <div slot="empty"><img src="../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
        </el-table>
        <el-pagination
          :page-size="activityPage.size"
          :current-page="activityPage.current"
          :total="activityPage.total"
          @current-change="changeActivityPage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import CountUp from '@/components/CountUp/index'
import CardItem from '@/components/CardItem/index.vue'
import Cookies from 'js-cookie'
export default {
  name: 'activityList',
  components: {
    HeaderTitle,
    CountUp,
    CardItem
  },
  data(){
    return {
      modal: {
        businessCount: 0,
        activityBusinessCount: 0,
        totalCouponNumber: 0,
        totalReceiveNumber: 0,
        totalConsumeNumber: 0
      },
      marketName: '',
      newMarketsArray: [],
      loading: true,
      keyword: '',
      activityData: [],
      activityPage:{
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.getActivityList(this.keyword, this.activityPage.size, this.activityPage.current)
    }
  },
  mounted(){
    this.getActivityList(this.keyword, this.activityPage.size, this.activityPage.current)
  },
  methods:{
    getActivityList(keyword, size, current){
      this.$store.dispatch("activity/fetchActivityList", {keyword, size, current}).then(
        data => {
          this.loading = false
          this.modal.businessCount = data.businessCount
          this.modal.activityBusinessCount = data.activityBusinessCount
          this.modal.totalCouponNumber = data.totalCouponNumber
          this.modal.totalReceiveNumber = data.totalReceiveNumber
          this.modal.totalConsumeNumber = data.totalConsumeNumber
          this.activityData = data.items
          this.activityPage.total = data.total
        }
      ).catch(err => {
          this.loading = false
          this.modal.businessCount = 0
          this.modal.activityBusinessCount = 0
          this.modal.totalCouponNumber = 0
          this.modal.totalReceiveNumber = 0
          this.modal.totalConsumeNumber = 0
          this.activityData = []
          this.activityPage.total = 0
      })
    },
    changeActivityPage(num){
      this.activityPage.current = num
      this.getActivityList(this.keyword,  this.activityPage.size, this.activityPage.current)
    },
    search(){
      this.activityPage.current = 1
      this.getActivityList(this.keyword,  this.activityPage.size, this.activityPage.current)
    },
    details(row){
      const businessId = row.businessId
      this.$router.push({
        path: `activity/detail/${businessId}`,
        query: {
          activityDetails: row
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>
